<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="30%">
		<el-form ref="formRef" :model="form" label-width="auto">
			<el-form-item label="下单时间" prop="create_time" v-if="form.create_time">
				<el-input :modelValue="timeDictionary(form.create_time)" disabled />
			</el-form-item>
			<el-form-item label="支付时间" prop="pay_time" v-if="form.pay_time">
				<el-input :modelValue="timeDictionary(form.pay_time)" disabled />
			</el-form-item>
			<el-form-item label="备货时间" prop="stock_up_time" v-if="form.stock_up_time">
				<el-input :modelValue="timeDictionary(form.stock_up_time)" disabled />
			</el-form-item>
			<el-form-item label="发货时间" prop="send_time" v-if="form.send_time">
				<el-input :modelValue="timeDictionary(form.send_time)" disabled />
			</el-form-item>
			<el-form-item label="确认收货时间" prop="over_time" v-if="form.over_time">
				<el-input :modelValue="timeDictionary(form.over_time)" disabled />
			</el-form-item>
			<el-form-item label="结算时间" prop="finish_time" v-if="form.finish_time">
				<el-input :modelValue="timeDictionary(form.finish_time)" disabled />
			</el-form-item>
			<el-form-item label="退款开始时间" prop="refund_start_time" v-if="form.refund_start_time">
				<el-input :modelValue="timeDictionary(form.refund_start_time)" disabled />
			</el-form-item>
			<el-form-item label="退款结束时间" prop="refund_end_time" v-if="form.refund_end_time">
				<el-input :modelValue="timeDictionary(form.refund_end_time)" disabled />
			</el-form-item>
			<el-form-item label="退款原因" prop="refund_reason" v-if="form.refund_reason">
				<el-input v-model="form.refund_reason" :rows="2" type="textarea" disabled />
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

export default {
	name: 'timeLineDialog',
	components: {},
	setup() {
		const state = reactive({
			title: '时间轴',
			open: false,
			form: {} as any,
		});

		const formRef = ref(null);

		/********** 点击事件(on开头) **********/

		// 取消按钮
		const onCancel = () => {
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			console.log(config);
			reset();
			state.open = true;
			state.form = {
				create_time: config.create_time,
				over_time: config.over_time,
				pay_time: config.pay_time,
				stock_up_time: config.stock_up_time,
				send_time: config.send_time,
				finish_time: config.finish_time,
				refund_start_time: config.refund_start_time,
				refund_end_time: config.refund_end_time,
				refund_reason: config.refund_reason,
			};
		};
		// 表单重置
		const reset = () => {
			state.form = {
				create_time: '',
				over_time: '',
				finish_time: '',
				pay_time: '',
				stock_up_time: '',
				send_time: '',
				refund_start_time: '',
				refund_end_time: '',
				refund_reason: '',
			};
			(formRef.value as any)?.resetFields();
		};

		return {
			formRef,
			openDialog,
			onCancel,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
